<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加删除属性</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function(){
            var mydiv=$("div");
            $("button:contains('添加边框')").click(function () {
                mydiv.attr("style","border: red 1px solid");
                // mydiv.css("border-width","1px;").css("border-color","red").css("border-style","solid")
            });
            $("button:contains('去掉边框')").click(function () {
               mydiv.removeAttr("style");
            });
            $("button:contains('添加背景色')").click(function () {
                mydiv.prop("style","background-color:#8d1eff");
            });
            $("button:contains('去掉背景色')").click(function () {
                mydiv.prop("style","background-color:#fff");
            });
            $("button:contains('添加内容')").click(function () {
                mydiv.html("<a href='https://baidu.com'>百度</a>");
            });
            $("button:contains('显示内容')").click(function () {
                alert(mydiv.html())
            }); $("button:contains('添加文本')").click(function () {
                mydiv.text("<a href='https://baidu.com'>百度</a>");
            });
            $("button:contains('显示文本')").click(function () {
                alert(mydiv.text())
            });
            $("button:contains('添加值')").click(function () {
                $("input").val("abc");
            });
            $("button:contains('显示值')").click(function () {
              alert($("input").val())
            });
        });
    </script>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>abcd</div>
    <input type="text">
    <button>添加边框</button>    <button>去掉边框</button>
    <button>添加背景色</button>    <button>去掉背景色</button>
    <button>添加文本</button>    <button>显示文本</button>
    <button>添加内容</button>    <button>显示内容</button>
    <button>添加值</button>    <button>显示值 </button>
</body>
</html>